<template>
  <div :class="activeClass" :style="styles" class="">
    <slot />
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  props: {
    offset: {
      type: Number,
      default: 32
    },
    paddingLeft: {
      type: Number,
      default: 0
    },
    openFixed: {// 是否开启悬浮
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState({
      'opened': state => state.app.sidebar.opened,
      'device': state => state.app.device,
      'showMobilePage': state => state.app.showMobilePage
    }),
    paginationWidth() {
      if (this.showMobilePage) return `100%`;
      if (this.device === 'mobile') {
        return `calc(100% - ${this.offset}px)`;
      }
      return `calc(100% - ${this.opened ? '168px' : '64px'} - ${this.offset}px - ${this.paddingLeft}px)`;
    },
    styles() {
      return this.openFixed ? { width: this.paginationWidth } : '';
    },
    activeClass() {
      return { 'mobile-pagination': this.showMobilePage, 'pagination-flex fb-fixed-pagination': this.openFixed };
    }
  },
  // watch: {
  //   opened: function(newVal) {
  //     this.update();
  //   }
  // },
  // mounted() {
  //   this.update();
  //   window.addEventListener('resize', this.update);
  // },
  // beforeDestroy() {
  //   window.removeEventListener('resize', this.update);
  // },
  // updated() {
  //   this.$nextTick(() => {
  //     const table = document.querySelector('.fb-table');
  //     if (table) {
  //       const rect = table.getBoundingClientRect();
  //       const topHeight = rect.top;
  //       const totalHeight = window.innerHeight - topHeight;
  //       const tableHeight = rect.height;
  //       console.log(rect, topHeight);
  //       console.log(totalHeight, tableHeight);
  //     }
  //   });
  // },
  methods: {
    update() {
      this.$nextTick(() => {
        const mainContainer = document.getElementById('page-main-container');
        this.paginationWidth = mainContainer.clientWidth - this.offset;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.fb-fixed-pagination {
  position: fixed;
  z-index: 1000;
  right: 0;
  bottom: 0;
}
.center {
  display:flex;
  width:100%;
  justify-content: center;
}
.pagination-flex {
  border-top: 1px solid #EBEEFD;
  display: flex;
  align-items: center;
  height: 56px;
  margin: 0 16px;
  padding: 0 20px;
  background-color: #fff;
}
.mobile-pagination {
  margin: 0;
  height: 49px !important;
  overflow-x: auto;
  overflow-y: hidden;
  .mobile-btn-flex {
    flex: 1;
    ::v-deep{
     .el-button, .el-dropdown {
        width: 100%;
      }
    }
  }
  .mobile-btn-group {
    padding: 16px;
  }
  .submit-btn, .cancel-btn-style {
    flex: 1;
  }
  ::v-deep .el-button {
    height: 36px !important;
    border-radius: 4px !important;
  }
}
</style>
